<template>
  <div id="home">
    <person-header></person-header>
    <div class="common-style money">
      <span class="title">资产总额：</span>
      <span class="balance">{{ closeEye ? "****" : balance }}</span
      >&nbsp;&nbsp;元&nbsp;&nbsp;
      <span
        class="iconfont"
        @click="changeEye"
        :class="closeEye ? 'iconeye1' : 'iconeye'"
        style="font-size: 1.6rem"
      ></span>
    </div>
    <ul class="common-style">
      <a-row>
        <a-col :span="8" v-for="(item, index) in list" :key="index"
          ><li @click="goPage(item.routerName, item.isValidateStatus)">
            <span
              :class="
                handleClass(item.isValidateStatus)
                  ? item.class + ' ' + item.activeClass
                  : item.class
              "
            ></span
            ><br />
            <span>{{ item.name }}</span>
          </li></a-col
        >
      </a-row>
    </ul>
  </div>
</template>

<script>
import { Row, Col } from "ant-design-vue";
import "@/assets/fonticon/iconfont.css";
export default {
  name: "index",
  components: {
    aRow: Row,
    aCol: Col,
    personHeader: () => import("@/components/personList/header")
  },
  data() {
    return {
      timer: null,
      list: [
        {
          name: "公司资料",
          class: "iconfont icongongsiziliao1",
          routerName: "companyInfo",
          activeClass: "company",
          isValidateStatus: false
        },
        {
          name: "我的项目",
          class: "iconfont iconwodexiangmu",
          routerName: "projectList",
          activeClass: "project",
          isValidateStatus: true
        },
        {
          name: "用款申请",
          class: "iconfont iconyongkuanshenqing",
          routerName: "money",
          activeClass: "apply",
          isValidateStatus: true
        },
        {
          name: "提现管理",
          class: "iconfont icontixianguanli",
          routerName: "withdraw",
          activeClass: "tixian",
          isValidateStatus: true
        },
        {
          name: "充值记录",
          class: "iconfont iconchongzhiguanli",
          routerName: "recharge",
          activeClass: "chongzhi",
          isValidateStatus: true
        },
        {
          name: "项目回款",
          class: "iconfont iconxiangmuhuikuan",
          routerName: "back",
          activeClass: "huikuan",
          isValidateStatus: true
        }
      ]
    };
  },
  methods: {
    goPage(routerName, isValidateStatus) {
      if (isValidateStatus) {
        if (this.checkStatus !== "5") {
          this.$message.warning(
            "您的企业信息尚未审核成功，待审核成功开启该权限"
          );
          return false;
        }
      }
      this.$router.push({ name: routerName });
    },
    changeEye() {
      this.$store.dispatch("changeCloseEye", !this.closeEye);
    },
    handleClass(isValidateStatus) {
      if (isValidateStatus) {
        if (this.checkStatus === "5") {
          return true;
        } else {
          return false;
        }
      } else {
        return true;
      }
    },
    getInfo() {
      this.$ajax
        .post(this.$api.getCompanyList)
        .then(res => {
          let status = res.data.status;
          this.$store.dispatch("changeCheckStatus", status.toString());
          this.$store.dispatch("changeValidateMobile", res.data.safemobile);
          if (this.checkStatus === "5" && !this.validateMobile) {
            this.$router.push({ name: "authentication" });
          }
        })
        .catch(err => {
          this.$message.error(err);
        });
    },
    IsPC() {
      let flag = true;
      let userAgentInfo = navigator.userAgent;
      let Agents = [
        "Android",
        "iPhone",
        "SymbianOS",
        "Windows Phone",
        "iPad",
        "iPod"
      ];
      for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
          flag = false;
          break;
        }
      }
      return flag;
    }
  },
  computed: {
    checkStatus() {
      return this.$store.state.checkStatus;
    },
    balance() {
      return this.$store.state.balance;
    },
    closeEye() {
      return this.$store.state.closeEye;
    },
    validateMobile() {
      return this.$store.state.validateMobile;
    }
  },
  created() {
    if (this.IsPC()) {
      this.$router.push({ name: "companyInfo" });
    } else {
      this.$commonJs.getBalanceApi();
      this.timer = setInterval(() => {
        this.$commonJs.getBalanceApi();
      }, 10000);
      this.getInfo();
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  }
};
</script>

<style scoped lang="less">
#home {
  background: #f8f6f6;
  height: 100%;
  width: 100%;
  .common-style {
    background: @white;
    margin: 1rem 0;
  }
  .money {
    padding: 1rem 2rem;
    .title {
      display: inline-block;
      margin-right: 2rem;
      font-size: 1.6rem;
    }
    .balance {
      font-size: 2.19rem;
      font-family: Century751BT-SemiBold;
      font-weight: normal;
      color: @primary-color;
    }
  }
  ul {
    li {
      flex: 1;
      padding: 20px;
      font-size: 14px;
      text-align: center;
      .iconfont {
        display: inline-block;
        margin-bottom: 5px;
        color: gray;
        font-size: 40px;
      }
      .company {
        .linear_gradient_back(#3573b1, #3e82cd);
        -webkit-background-clip: text; /*必需加前缀 -webkit- 才支持这个text值 */
        -webkit-text-fill-color: transparent; /*text-fill-color会覆盖color所定义的字体颜色： */
      }
      .project {
        .linear_gradient_back(#ff9028, #ef8028);
        -webkit-background-clip: text; /*必需加前缀 -webkit- 才支持这个text值 */
        -webkit-text-fill-color: transparent; /*text-fill-color会覆盖color所定义的字体颜色： */
      }
      .apply {
        .linear_gradient_back(#e0c6c2, #bf9f92);
        -webkit-background-clip: text; /*必需加前缀 -webkit- 才支持这个text值 */
        -webkit-text-fill-color: transparent; /*text-fill-color会覆盖color所定义的字体颜色： */
      }
      .tixian {
        .linear_gradient_back(#1bbee8, #90dcd8);
        -webkit-background-clip: text; /*必需加前缀 -webkit- 才支持这个text值 */
        -webkit-text-fill-color: transparent; /*text-fill-color会覆盖color所定义的字体颜色： */
      }
      .chongzhi {
        .linear_gradient_back(#d75f5c, #dc7f78);
        -webkit-background-clip: text; /*必需加前缀 -webkit- 才支持这个text值 */
        -webkit-text-fill-color: transparent; /*text-fill-color会覆盖color所定义的字体颜色： */
      }
      .huikuan {
        .linear_gradient_back(#b2bc81, #97a16d);
        -webkit-background-clip: text; /*必需加前缀 -webkit- 才支持这个text值 */
        -webkit-text-fill-color: transparent; /*text-fill-color会覆盖color所定义的字体颜色： */
      }
    }
  }
}
</style>
